<template>
    <el-container>
        <el-header  class="searchBox" height="70px" style="padding: 8px">
            <el-form :inline="true" :model="searchList">
                <el-row>
                    <el-form-item label="角色姓名:">
                        <el-input v-model="searchList.name"></el-input>
                    </el-form-item>
                    <el-button @click="search">搜索</el-button>
                    <el-button @click="reset">重置</el-button>
                    <el-button plain type="success" @click="handleAdd">新增</el-button>
                </el-row>
            </el-form>
        </el-header>
        <el-main>
            <el-table v-loading="this.loading" border :data="roleList">
                <el-table-column label="Id" prop="Id"></el-table-column>
                <el-table-column label="角色名" prop="RoleName"></el-table-column>
                <el-table-column label="描述" prop="Remark"></el-table-column>
                <el-table-column label="添加时间" prop="CreateTime"></el-table-column>
                <el-table-column label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button type="info" @click="allocMenu(scope.$index,scope.row)">分配角色菜单</el-button>
                        <el-button type="primary" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
                        <el-button type="danger" @click="deleteRole(scope.$index,scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>


        <el-dialog :visible.sync="editVisible" title="编辑" width="350px">
        <el-form :model="listQuery">
            <el-form-item label="角色名称:">
                <el-input  v-model="listQuery.RoleName"></el-input>
            </el-form-item>
            <el-form-item label="备注:">
                <el-input  v-model="listQuery.Remark"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer">
                <el-button @click="handleEidtConfirm()">保存</el-button>
                <el-button @click="editVisible=false">取消</el-button>
            </span>
    </el-dialog>
        <el-dialog :visible.sync="addVisible" title="新增" width="350px">
            <el-form :model="listQuery">
                <el-form-item label="角色名称:">
                    <el-input  v-model="listQuery.RoleName"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="listQuery.Remark"></el-input>
                </el-form-item>
<!--                <el-form-item label="设置菜单">-->
<!--                    <el-option-group></el-option-group>-->
<!--                </el-form-item>-->
            </el-form>
            <span slot="footer">
                <el-button @click="addRole">保存</el-button>
                <el-button @click="addVisible=false">取消</el-button>
            </span>
        </el-dialog>
    </el-container>
</template>

<script>

import {addRole, deleteRole, fetchAllRoles, fetchRoleByName, updateRoles} from "../../../api/roleSetting";
import {messages} from "../../common/i18n";

const defaultList={
    Id:'',
    RoleName:'',
    Remark:'',
    CreateTime:'',
}
const defaultFilter={
    name:''
}

export default {
    name: "RoleSetting",
    data() {
        return {
            roleList: [],
            listQuery: Object.assign({},defaultList),
            editVisible:false,
            searchList: Object.assign({},defaultFilter),
            addVisible:false,
            loading:false
        }
    },
    methods:{
        getRoleList(){
            this.loading=true
            fetchAllRoles().then(res=>{
                this.roleList = res.Result
                this.loading=false
            })
        },
        handleEdit(index,row){
            this.editVisible=true
            this.listQuery=row;
        },
        handleEidtConfirm(){
            let data={RoleName:this.listQuery.RoleName,
                      Remark: this.listQuery.Remark,
                        }
            let para={Id:this.listQuery.Id}
            updateRoles(data,para).then(res=>{
                this.$message({
                    message: '修改成功！',
                    type: 'success'
                });
                this.getRoleList()
                this.editVisible=false
            })
        },
        deleteRole(index,row){
            let para={Id:row.Id}
            this.$confirm('是否要删除该角色?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                    deleteRole(para).then(res => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getRoleList();
                        this.listQuery={}
        },
                    )})
        },
        search(){
            if(this.searchList.name=='')
            {
                this.$message({
                    type:'warning',
                    message:'请输入值！'
                })
            }
            else{
                this.loading=true
                fetchRoleByName(this.searchList).then(res=>{
                    this.roleList=[],
                        this.roleList.push(res.Result)
                        this.loading=false
                }).catch(err=>{
                   this.loading=false
                })
            }

        },
        handleAdd(){
            this.addVisible=true
        },
        addRole(){
            let para={name:this.listQuery.RoleName}
            addRole(para).then(res=>{
                this.$message({
                    type: 'success',
                    message: '添加成功!'
                });
                this.addVisible=false
                this.getRoleList();
                this.listQuery={}
            })
        },
        reset(){
            this.getRoleList()
            this.searchList.name=''
        },
        allocMenu(index,row){
            this.$router.push({path:'./allocMenu',query:{id:row.Id}})
        }
    },
    created() {
        this.getRoleList()
    }
}
</script>

<style scoped>
    .searchBox{
        border: 1px solid rgb(191, 203, 217);
    }
</style>